<template>

  <el-container style="height:100%">
    <el-aside width="250px">
      <div style="background-color: #f1f3f7;padding:20px;height:100%">
        <a href="javascript:void(0);" @click="patientsDialog = true"><span style="font-size:-webkit-xxx-large">{{ patientInfo.patientName ? patientInfo.patientName : '无' }}</span></a>
        <el-tag color="white" size="mini">{{ patientInfo.treatCount > 0 ? '复诊' : '初诊' }}</el-tag>
        <p>挂号科室:{{ departName }}</p>
        <p>已就诊{{ patientInfo.treatCount }}次</p>
        <el-button type="primary" size="mini" style="width: 100%" @click="showHistory">查看历史病历</el-button>
        <p>电话：{{ patientInfo.telephone }}</p>
        <hr>
        <p>性別：{{ patientInfo.sex }}</p>
        <hr>
        <p>年龄：{{ patientInfo.age }}</p>
        <hr>
        <p>身高：{{ patientInfo.height }}</p>
        <hr>
        <p>BMI指数：{{ patientInfo.bmi }}</p>
        <hr>
        <p>体温：{{ patientInfo.temperature }}</p>
        <hr>
        <p>呼吸：{{ patientInfo.breath }}</p>
        <hr>
        <p>脉搏：{{ patientInfo.pulse }}</p>
        <hr>
        <p>血压：{{ patientInfo.sbp }}/{{ patientInfo.dbp }}mmHg</p>
        <hr>
        <p>氧饱和度：{{ patientInfo.spo2 }}</p>
        <hr>
        <p>婚孕：{{ patientInfo.marriage }}</p>
        <hr>
      </div>
      <el-dialog title="病人" width="30%" :visible.sync="patientsDialog">
        <div class="patient">
          <el-button type="info" v-for="(e, i) in patients" :key="i" @click="switchPatient(e.recordId)" plain>{{ e.patientName }}</el-button>
        </div>
      </el-dialog>
      <el-dialog title="历史病历" :visible.sync="dialogVisible" class="record-history-dialog">
        <div v-for="(item, index) in historyRecord" :key="index" v-loading="loading">
          <div style="background-color:#f0f3f7;height:50px;display:flex;align-items:center;position:relative">
            <a style="margin-left:20px;" href="javascript:void(0)" @click="chooseItem(item)">{{ item.datetime }} - 浙江省人民医院 - {{ item.patientInfo.patientName.value }} - {{ parseDisease(item) }}</a>
            <a href="javascript:void(0);" @click="print(item)" style="position:absolute;right:10px;color:#b5b5b5"><i class="el-icon-printer"></i>&nbsp;打印病历</a>
          </div>
          <div v-show="item.chosen">
            <div class="historyItem">
              <span style="margin-left:20px">主诉: <span v-html="parseChiefComplaint(item.chiefComplaint, dictIndex)"></span></span>
            </div>
            <div class="historyItem">
              <span style="margin-left:20px">现病史:<span v-html="parseHPI(item.HPI, dictIndex)"></span></span>
            </div>
            <div class="historyItem">
              <span style="margin-left:20px">既往史:<span v-html="parsePastHistory(item.pastHistory, dictIndex)"></span></span>
            </div>
            <div class="historyItem">
              <span style="margin-left:20px">体格检查:<span v-html="parsePE(item.PE)"></span></span>
            </div>
            <div class="historyItem">
              <span style="margin-left:20px">检查检验:<span v-html="parseCheckout(item)"></span></span>
            </div>
            <div class="historyItem">
              <span style="margin-left:20px">诊断:<span v-html="parseDiagnosis(item.diagnosis) "></span></span>
            </div>
          </div>
        </div>
      </el-dialog>
    </el-aside>
    <el-main>
      <div>
        <el-input
          @change="search"
          placeholder="搜索更多模板"
          v-model="searchText">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <div class="templateGroup">
          <template-card v-for="(t, index) in tempDept" :key="index" :data="{ id: t._id, name: t.name, owner: departName, usageCount: 100, remark: t.remark, item: t }" color="dept" />
        </div>
        <div class="templateGroup">
          <template-card v-for="(t, index) in tempMine" :key="index" :data="{ id: t._id, name: t.name, owner: opName, usageCount: 100, remark: t.remark, item: t }" color="doctor" />
          <template-card color="grey" />
        </div>
        <div class="templateGroup">
          <template-card v-for="(t, index) in tempGroup" :key="index" :data="{ id: t._id, name: t.name, owner: groupIndex[t.templateOwner], usageCount: 100, remark: t.remark, item: t }" color="group" />
        </div>
        <div class="templateGroup">
          <template-card v-for="(t, index) in tempHospital" :key="index" :data="{ id: t._id, name: t.name, owner: '医院', usageCount: 100, remark: t.remark, item: t }" color="hospital" />
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { mapGetters } from 'vuex'
import TemplateCard from '@/components/TemplateCard/TemplateCard1'
import { getHistoryRecords } from '@/api/record'
import { getAllPatients } from '@/api/patientInfo'
import { parseChiefComplaint, parseHPI, parsePastHistory, parsePE, parseCheckout, parseDiagnosis } from '@/utils/index'

export default {
  name: "PatientInfo",
  components: {
    TemplateCard
  },
  data() {
    return {
      loading: true,
      dialogVisible: false,
      searchText: '',
      groupIndex: {},
      patientInfo: {},
      historyRecord: [],
      patients: [],
      patientsDialog: false
    }
  },
  methods: {
    parseChiefComplaint,
    parseHPI,
    parsePastHistory,
    parsePE,
    parseCheckout,
    parseDiagnosis,
    print(item) {
      localStorage.setItem('tempOpen', JSON.stringify(item))
      window.open('/#/print')
    },
    search() {
      this.tempMine = this.templates.tempMine.filter(e => e.name.includes(this.searchText))
      this.tempGroup = this.templates.tempGroup.filter(e => e.name.includes(this.searchText))
      this.tempDept = this.templates.tempDept.filter(e => e.name.includes(this.searchText))
      this.tempHospital = this.templates.tempHospital.filter(e => e.name.includes(this.searchText))
    },
    parseChiefComplaint,
    switchPatient(recordId) {
      this.$router.replace({ path: '/patientInfo', query: {
        patientId: recordId
      }})
      this.patientsDialog = false
      this.initPatient()
    },
    chooseItem(item) {
      this.$set(item, 'chosen', !item.chosen)
    },
    showHistory() {
      this.dialogVisible = true
      getHistoryRecords(this.patientInfo.patientId).then(res => {
        if (res.data) {
          this.loading = false
          this.historyRecord = res.data
          if (this.historyRecord.length > 0) {
            this.$set(this.historyRecord[0], 'chosen', true)
          }
        } else {
          this.$message({
            message: '请求错误',
            type: 'error'
          })
        }
      })
    },
    initPatient() {
      // 获取病人信息
      if (this.$route.query.patientId) {
        this.$store.dispatch('getPatientInfo', this.$route.query.patientId).then(res => {
          this.patientInfo = res
        })
      }
    },
    parseDisease(item) {
      if (item && item.diagnosis && item.diagnosis.length > 0) {
        let chosen = item.diagnosis.filter(e => e.chosen)
        if (chosen.length > 1) {
          return chosen.reduce((a, b) => a.disease + ',' + b.disease)
        } else if (chosen.length > 0) {
          return chosen[0].disease
        } else {
          return ''
        }
      }
    }
  },
  computed: {
    ...mapGetters([
      'opName',
      'departName',
      'dictIndex',
      'groups',
      'templates'
    ]),
    tempMine() {
      if (this.templates) {
        return this.templates.tempMine
      } else {
        return []
      }
    },
    tempGroup() {
      if (this.templates) {
        return this.templates.tempGroup
      } else {
        return []
      }
    },
    tempDept() {
      if (this.templates) {
        return this.templates.tempDept
      } else {
        return []
      }
    },
    tempHospital() {
      if (this.templates) {
        return this.templates.tempHospital
      } else {
        return []
      }
    }
  },
  mounted() {
    getAllPatients().then(res => {
      this.patients = res.data
    })
    this.initPatient()
    // 生产医疗组编码-名称对象
    this.groups.forEach(i => {
      this.groupIndex[i.groupId] = i.groupName
    })
    this.$store.dispatch('getTemplates', true).then(res => {
    })
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .historyItem {
    padding: 10px 0;
    border-bottom: 1px solid #efefef;
    display: flex;
    align-items: center;
  }
  .templateGroup {
    display: flex;
    flex-wrap: wrap;
  }
  .patient {
    display: flex;
    flex-wrap: wrap;
    .el-button {
      margin: 10px;
    }
  }
</style>
